<template>
    <div class="w100">
        <mu-text-field v-model="showText" placeholder="请选择" ref="show" @click="open = !open" full-width action-icon="playlist_add_check" :action-click="()=>{open = !open}"></mu-text-field>
        <mu-popover cover :open.sync="open" :trigger="trigger">
            <div>
                <div class="flex-r flex-start bc13 flex-fill" :style="{width: `${colData.length*150}px`}">
                    <mu-list style="width: 150px;" class="bcf" :class="{bdlso:index>0}" toggle-nested
                             toggle-nested-type="popover" v-for="(col,index) in colData" :key="index">
                        <mu-list-item nested button
                                      v-for="(item,rowIndex) in col"
                                      @click="setChild(item,index+1,rowIndex)"
                                      :class="{fwb:selects[index] === rowIndex}"
                                      :open="selects[index] === rowIndex"
                                      :key="item.id">
                            <div class="flrc w100">
                                <div class="flex1">{{item.title}}</div>
                                <div v-if="item.children.length > 0">
                                    <mu-icon value="keyboard_arrow_right" v-show="selects[index] !== rowIndex"></mu-icon>
                                </div>
                                <div>
                                    <mu-icon color="primary" value="check_box" v-show="selects[index] === rowIndex"></mu-icon>
                                </div>
                            </div>
                        </mu-list-item>
                    </mu-list>
                </div>
                <div class="bdtso tar">
                    <mu-button flat small @click="open = !open">确定</mu-button>
                    <mu-button flat small @click="clear">清空</mu-button>
                </div>
            </div>
        </mu-popover>
    </div>
</template>

<script>
    export default {
        name: "EzCascade",
        props: {
            value: {},
            config: {}
        },
        data() {
            return {
                choices: [],
                open: false,
                trigger: null,

                //级联选择数据列
                colData: [],
                //选择数据
                selects: [],
                //最终数据
                inSideValue: 0,
                showText: "请选择",
            }
        },
        mounted() {
            this.trigger = this.$refs.show.$el
            this.inSideValue = this.value
            //检查是否设置了数据接口，如果是则从接口获取数据
            if (this.config.api === "") {
                this.choices = this.config.choices
                this.createColData()
            } else {
                if (this.config.apiWhere != {}){
                    this.config.apiParams._where = this.config.apiWhere
                }
                this.config.apiParams.limit = this.config.apiLimit<0?500:this.config.apiLimit
                this.config.apiParams.page = this.config.apiPage<0?1:this.config.apiPage
                this.$http.post(this.config.api, this.config.apiParams, res => {
                    this.choices = this.config.apiCbFunc(res.data)
                    this.createColData()
                })
            }
        },
        methods: {
            findId(items){
                for (let index in items) {
                    let item = items[index*1]
                    if (item.id === this.value){
                        this.selects.unshift(index*1)
                        return true
                    }
                    if (item.children.length > 0){
                        let find = this.findId(item.children)
                        if (find){
                            this.selects.unshift(index*1)
                            return true
                        }
                    }
                }
                return false
            },
            createColData() {
                this.colData = [this.choices]
                this.findId(this.choices)
                for (let index in this.selects) {
                    let colIndex = this.selects[index*1]*1
                    let item = this.colData[index*1][colIndex]
                    index++
                    if (item.children.length > 0) {
                        this.colData.splice(index*1, this.colData.length - index, item.children)
                    } else {
                        this.colData.splice(index*1, this.colData.length - index)
                    }
                }
                this.createShowText()
            },
            setChild(item, index, rowIndex) {
                if (item.children.length > 0) {
                    this.colData.splice(index, this.colData.length - index, item.children)
                } else {
                    this.colData.splice(index, this.colData.length - index)
                }
                this.selects.splice(index - 1, this.selects.length - index + 1, rowIndex)
                this.createShowText()
                this.inSideValue = item.id
            },
            createShowText(){
                let startText = ""
                let startChoice = this.choices
                for (let index of this.selects) {
                    if (startText === ""){
                        startText += `${startChoice[index].title}`
                    }else {
                        startText += ` / ${startChoice[index].title}`
                    }
                    startChoice = startChoice[index].children
                }
                this.showText = startText
            },
            clear(){
                this.inSideValue = null
                this.showText = "请选择"
                this.selects = []
                this.colData = [this.choices]
            }
        },
        watch: {
            inSideValue(val) {
                this.$emit("input", val)
            }
        },
    }
</script>

<style scoped>
</style>